import { ref, reactive } from "vue";
import type { PaginationProps } from "@pureadmin/table";

import Empty from "./empty.svg?component";

export function useColumns(tableData) {
  const dataList = ref(tableData);
  const loading = ref(false);

  const columns: TableColumnList = [
    {
      sortable: true,
      label: "统计日期",
      prop: "date"
    },
    {
      sortable: true,
      label: "检查总数",
      prop: "totalCheckNum",
      filterMultiple: false,
      filters: [
        { text: "≥16000", value: "more" },
        { text: "<16000", value: "less" }
      ],
      filterMethod: (value, { totalCheckNum }) => {
        return value === "more"
          ? totalCheckNum >= 16000
          : totalCheckNum < 16000;
      }
    },
    {
      sortable: true,
      label: "不合格数量",
      cellRenderer: ({ row }) => (
        <div>{row.totalCheckNum - row.qualifiedNum}</div>
      )
    },
    {
      sortable: true,
      label: "检查合格数量",
      prop: "qualifiedNum"
    },
    {
      sortable: true,
      label: "检查合格率",
      minWidth: 100,
      prop: "qualifiedRate",
      cellRenderer: ({ row }) => (
        <div class="flex justify-center w-full">
          <span class="flex items-center w-[60px]">
            <span class="ml-auto mr-2">{row.qualifiedRate}%</span>
          </span>
        </div>
      )
    },
    {
      sortable: true,
      label: "新增安全信息数量",
      prop: "reportNum"
    },
    {
      sortable: true,
      label: "新增整改数量",
      prop: "reformNum"
    },
    {
      sortable: true,
      label: "完成整改数量",
      prop: "reformOverNum"
    },
    {
      label: "操作",
      fixed: "right",
      slot: "operation"
    }
  ];

  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    layout: "prev, pager, next",
    total: dataList.value.length,
    align: "center"
  });

  function onCurrentChange(page: number) {
    pagination.currentPage = page;
  }

  return {
    Empty,
    loading,
    columns,
    dataList,
    pagination,
    onCurrentChange
  };
}
